<template>
    <div class="big_userinfo">
      <!-- 修改头像 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span :style="{ color: color }">修改头像</span>
          </div>
        </template>
        <div>
          <el-upload :headers="headers" class="upload_image" :before-upload="beforeAvatarUpload"
            :http-request="uploadImage" :show-file-list="false">
            <el-image :src="userinfo.image" v-if="userinfo.image" />
            <el-icon :size="40" color="#a8abb2" v-else>
              <Plus />
            </el-icon>
          </el-upload>
        </div>
      </el-card>
      <!-- 个人信息 -->
      <el-card class="box-userinfo-message">
        <template #header>
          <div class="card-header">
            <span :style="{ color: color }">基本信息</span>
            <div class="switchChanegUserInfo" @click="switchChanegUserInfo">
              <el-icon :color="color">
                <Switch />
              </el-icon>
              <div class="operate" :style="{ color: color }">
                {{ showLookUserInfo ? "基本信息" : "修改信息" }}
              </div>
            </div>
          </div>
        </template>
        <!-- 查看 -->
        <div v-if="showLookUserInfo">
          <div class="flex-userinfoMessage">
            <div class="flex-nowrap">用户名</div>
            <el-input v-model="userinfo.username" disabled placeholder="暂无用户名"></el-input>
          </div>
          <div class="flex-userinfoMessage">
            <div class="flex-nowrap">住址</div>
            <el-input v-model="userinfo.address" disabled placeholder="暂无住址"></el-input>
          </div>
          <div class="flex-userinfoMessage">
            <div class="flex-nowrap">手机号</div>
            <el-input v-model="userinfo.phone" disabled placeholder="暂无手机号码"></el-input>
          </div>
          <div class="flex-userinfoMessage">
            <div class="flex-nowrap">性别</div>
            <div>{{ userinfo.sex == 0 ? "男" : "女" }}</div>
          </div>
          <div class="flex-userinfoMessage">
            <div class="flex-nowrap">邮箱</div>
            <el-input v-model="userinfo.email" disabled placeholder="暂无邮箱"></el-input>
          </div>
          <div class="flex-userinfoMessage">
            <div class="flex-nowrap">昵称</div>
            <el-input v-model="userinfo.nickname" disabled placeholder="暂无昵称"></el-input>
          </div>
        </div>
        <!-- 修改 -->
        <div v-else>
          <el-form ref="userinfoForm" :model="userinfo" :rules="rules" @submit.native.prevent="onSubmit"
            label-width="80px">
            <el-form-item label="用户昵称" prop="nickname">
              <el-input maxlength="30" v-model="userinfo.nickname" />
            </el-form-item>
            <el-form-item label="住址" prop="address">
              <el-input maxlength="30" v-model="userinfo.address" />
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input maxlength="11" v-model="userinfo.phone" />
            </el-form-item>
            <el-form-item label="用户邮箱" prop="email">
              <el-input maxlength="50" v-model="userinfo.email" />
            </el-form-item>
            <el-form-item label="用户性别">
              <el-radio-group v-model="userinfo.sex">
                <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="onSubmit">保存</el-button>
              <el-button type="danger" @click="onClose">关闭</el-button>
              <el-button type="primary" @click="goLogin"> 退出登录 </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>

    </div>


</template>

<script setup lang="ts" name="SettingPage">
import { removeUserInfo } from '@/utils'
import { UserinfoApi, UserinfoEditApi, imageUpload } from '../../api/index.js'
import { useRouter } from 'vue-router'
import { onMounted, ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
const router = useRouter()
const goLogin = () => {
  removeUserInfo()
  router.replace('./login')
}
const color = ref('#8bc4ff')
const headers = {
  Authorization: localStorage.getItem('token')
}
const userinfo = ref({
  nickname: "",
  phone: "",
  email: "",
  sex: "1",
  address: "",
  image: "",
  username: "",
  image: "",
})
const rules = reactive({
  nickname: [
    { required: true, message: "用户昵称不能为空", trigger: "blur" },
  ],
  address: [{ required: true, message: "住址不能为空", trigger: "blur" }],
  email: [
    { required: true, message: "邮箱地址不能为空", trigger: "blur" },
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
  phone: [
    { required: true, message: "手机号码不能为空", trigger: "blur" },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ]
})
const showLookUserInfo = ref(false)

const uploadImage = (param) => {
  // 获取上传的文件名
  var file = param.file;
  //发送请求的参数格式为FormData
  const formData = new FormData();
  formData.append("file", file);
  // 调用param中的钩子函数处理各种情况，这样就可以用在组件中用钩子了。也可以用res.code==200来进行判断处理各种情况
  imageUpload(formData, param)
    .then((res) => {
      if (res.data.code == 1) {
        userinfo.value.image = res.data.data.path
      }
      // param.onSuccess(res);
    })
    .catch((err) => {
      param.onError(err);
    });
}
const beforeAvatarUpload = (file) => {
  console.log(file.type);
}
const switchChanegUserInfo = () => {
  if (!userinfo.value.nickname) return ElMessage.error("请先填写昵称")
  if (!userinfo.value.address) return ElMessage.error("请先填写住址")
  if (!userinfo.value.phone) return ElMessage.error("请先填写手机号码")
  if (!userinfo.value.email) return ElMessage.error("请先填写邮箱")
  showLookUserInfo.value = !showLookUserInfo.value;
}
const getUserinfoMessage = () => {
  UserinfoApi().then((res) => {
    userinfo.value = res.data.data;
  });
}
const userinfoForm = ref(null); // 用于引用表单
const onSubmit = () => {
  userinfoForm.value.validate((valid) => {
    if (valid) {
      UserinfoEditApi(userinfo.value).then((res) => {
        if (res.data.code == 1) {
          console.log(123456);

          ElMessage.success('保存成功')
          showLookUserInfo.value = true
        } else {
          ElMessage.error('保存失败')
        }
      });
    } else {
      ElMessage.error('请填写完整信息')
    }
  });
}
const onClose = () => {
  showLookUserInfo.value = true;
}

onMounted(() => {
  getUserinfoMessage()
})
</script>

<style scoped lang="scss">
.el-image {
  margin-top: 40px;
  height: 200px;
  width: 180px;
}

.big_userinfo {
  display: flex;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 240px;
  height: 300px;

  .upload_image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
  }
}

.box-userinfo-message {
  flex: 1;
  margin-left: 20px;

  .flex-userinfoMessage {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;

    .flex-nowrap {
      width: 60px;
    }
  }

  .onSumbitUserinfo {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}

.switchChanegUserInfo {
  display: flex;
  align-items: center;

  .operate {
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>
